<template>
  <ul class="chooser">
    <li v-for="(item,index) in selections" :class="{active : (nowIndex === index)}" @click="fnChooseIndex(index)">{{item.label}}</li>
  </ul>
</template>

<script lang="ts">
  import Vue from 'vue'
  import {Component, Prop, Emit} from 'vue-property-decorator'

  //引入组件
  @Component
  export default class Selection extends Vue {
    //选项列表
    @Prop({ type:Array })
    selections

    //当前选择对象的ID
    nowIndex : number = 0

    //methods
    //返返回父级
    @Emit()
    emitOnChange(val) {}

    //选中值
    fnChooseIndex(index) {
      this.nowIndex = index
      let chooseVal = this.selections[index]
      this.emitOnChange(chooseVal)
    }
  }
</script>

<style lang="scss" scoped>
  .chooser {
    list-style: none;
    display: flex;
    flex-direction: row;

    li {
      padding:7px 15px;
      margin-right: 10px;
      border-radius: 3px;
      cursor: pointer;
    }

    .active {
      background: #4fc08d;
      color: #fff;
    }
  }
</style>
